<template>
  <div class="form-view-row form-product-view">
    <label>{{ field.displayName }}</label>
    <div class="form-view-row-content">
      <!-- start 子表单表格 -->
      <el-table
        v-if="columns.length"
        :data="subformFieldsValues"
        header-row-class-name="common-list-table-header__v2"
        border
      >
        <el-table-column type="index" width="50" :label="$t('common.base.SN')" />
        <el-table-column
          v-for="(column, index) in columns"
          :key="`${column.field}_${index}`"
          :label="column.label"
          :prop="column.field"
          :width="column.width"
          :min-width="column.minWidth || '120px'"
          :show-overflow-tooltip="column.field !== 'name'"
          :align="column.align"
        >
          <template slot-scope="scope">
            <template v-if="column.setting.originalFormType === 'address'">
              {{ getAddress(scope.row[column.field]) }}
            </template>
            <template v-else-if="column.setting.originalFormType === 'user'">
              {{ getUser(scope.row[column.field]) }}
            </template>
            <template
              v-else-if="column.setting.originalFormType === 'cascader'"
            >
              {{ scope.row[column.field] | fmt_form_cascader(column.setting.isMulti, column.setting.displayMode) }}
            </template>
            <template
              v-else-if="column.setting.originalFormType === 'location'"
            >
              {{ scope.row[column.field] && scope.row[column.field].address }}
            </template>
            <template v-else-if="column.fieldName === 'serviceMoney' && internationalGray">
              {{ montageCurrency(scope.row, column) }}
            </template>
            <template v-else>
              {{
                $formatFormField(column, scope.row)
              }}
            </template>
          </template>
        </el-table-column>
      </el-table>
      <!-- end 子表单表格 -->
    </div>
  </div>
</template>

<script>
/* service */
import { smoothQualityInfoFieldForTable } from '@service/QualityInfoService';
import { formatAddress, useFormTimezone } from 'pub-bbx-utils';
/* utils */
import { CURRENCY_SUFFIX } from '@src/util/currency';
// 国际化灰度
import useFormMultiLanguage from '@hooks/useFormMultiLanguage'
const { internationalGray } = useFormMultiLanguage();

const { disposeFormListViewTime } = useFormTimezone()

export default {
  name: 'form-product-view',
  props: {
    field: {
      type: Object,
      default: () => ({}),
    },
    value: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    columns() {
      let tableColumns = this.field?.subFormFieldList || [];
      let columns = smoothQualityInfoFieldForTable(tableColumns || []);

      columns.map(field => {
        field.label = field.displayName;
        field.field = field.fieldName;
      });
      return columns;
    },
    subformFieldsValues() {
      const value = (this.value || []).map(item => {
        item.catalogId = item.catalog?.pathName || '';

        return {
          ...item,
        };
      });
      return disposeFormListViewTime(value, this.columns)
    },
    internationalGray() {
      return internationalGray;
    }
  },
  methods: {
    // 特殊数据处理
    getAddress(fieldVal) {
      return formatAddress(fieldVal);
    },
    getUser(fieldVal) {
      return Array.isArray(fieldVal)
        ? fieldVal.map(v => v.displayName).join(',')
        : fieldVal?.displayName || '';
    },
    // 产品表格中的金额添加币种
    montageCurrency(row, column) {
      const currencyField = column.field + CURRENCY_SUFFIX;
      return row[currencyField] ? `${row[column.field]} ${(row[currencyField] || 'CNY')}` : row[column.field];
    }
  },
};
</script>
<style lang="scss" scoped>
.form-product-view {
  align-items: flex-start;
}
</style>

